<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="意见反馈" mtClass="no-bg" rightIcon="icon-guanbi"/>
        <div class="blank-9"></div>
        <div class="list">
            <mt-field placeholder="请详细描述您的建议，这将帮助我们持续改进！" type="textarea" rows="6" disableClear v-model="inputValueFeedback"></mt-field>
            <div class="fileBox file-img" v-show="base64Img">
                <p class="img"><img :src="base64Img"></p>
            </div>
            <div class="fileBox" @click="callEvent">
                <div class="line rows"></div>
                <div class="line cols"></div>
            </div>
        </div>
        <div class="blank-9"></div>
        <div class="list">
            <mt-field placeholder="请输入您的联系电话或邮箱，便于我们与您联系(选填)" type="tel" disableClear v-model="inputValuePhone"></mt-field>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="inputValueFeedback?false:true" @click="submit">提交</mt-button>
            <!-- <div class="tips">若您的问题亟需解决，可关注<span @click="isShowCodeBox=true">微信公众号</span></div> -->
        </div>
        <!-- <div class="codeBox" v-show="isShowCodeBox">
            <div class="inner">
                <div class="name">公众号二维码</div>
                <div class="desc">保存二维码，打开微信扫一扫或者在微信 公众号搜索<span class="btn" @click="copyEvent">数链基地</span>(点击复制)</div>
                <img src="static/code.jpg" class="code">
                <div class="offBtn" @click="isShowCodeBox=false">
                    <img src="../../../assets/close.png" alt="">
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { PostUserFeedback } from '@/api/api'
import { Toast } from 'mint-ui';
import { dataURItoBlob, getSystemType } from '@/utils'
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            inputValueFeedback:'',
            inputValuePhone:'',
            isShowCodeBox:false,

            base64Img: ''
        }
    },
    components:{
        mtHeader
    },
    mounted(){
        //将要给原生调用的方法挂载到 window 上面
        if( getSystemType().type == 'android' ){
            window.sendPhotoBase64Feedback = this.sendPhotoBase64Feedback;
        }
        if( getSystemType().type == 'ios' ){
            window.feedbackResult = this.feedbackResult;
        }
    },
    activated(){
        this.base64Img = '';
        this.inputValuePhone = '';
        this.inputValueFeedback = '';
    },
    methods: {
        callEvent(){
            if( getSystemType().type == 'android' ){
                window.javaObj.startAlbumFeedback(0);
            }
            if( getSystemType().type == 'ios' ){
                window.webkit.messageHandlers.startAlbumFeedback.postMessage({type:0});
            }
        },
        sendPhotoBase64Feedback(str) {
            // console.log(str);
            var result = str.split(",");
            this.base64Img = 'data:image/png;base64,' + result[1];
        },
        feedbackResult(type,base64){
            // console.log(str);
            this.base64Img = 'data:image/png;base64,' + base64;
        },
        submit(){
            dataURItoBlob(this.base64Img, (res) => {
                PostUserFeedback({
                    file: res,
                    contactMobile: this.inputValuePhone,
                    content: this.inputValueFeedback
                }).then(res => {
                    if( res.code == 200 ){
                        Toast({
                            message: "提交成功",
                            iconClass: 'icon iconfont icon-ic_check'
                        })
                        this.$router.push('/account/setting')
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        })
                    }
                })
            });
        },
        copyEvent(){
            var clipboard = new Clipboard('.btn', {
                text: function() {
                    return '数链基地';
                }
            });
            clipboard.on('success', e => {
                Toast({
                    message: '复制成功',
                    iconClass: 'icon iconfont icon-ic_check'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                Toast({
                    message: '不支持自动复制',
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                });
                // 释放内存
                clipboard.destroy()
            })
        },
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    height:100%;
    color:#BFBFBF;
    position:relative;
    .fileBox{
        width:63px;
        height:63px;
        border:1px solid #F4F5FA;
        position:relative;
        margin-left:15px;
        margin-bottom:44px;
        display: inline-block;
        margin-top: 20px;
        input{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity: 0;
        }
        .line{
            width:30px;
            height:30px;
            background:#ddd;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            &.rows{
                width:1px;
                height:30px;
            }
                &.cols{
                width:30px;
                height:1px;
            }
        }
        &.file-img{
            .img{
                position: relative;
                width: 61px;
                height: 61px;
                img{
                    width: 100%;
                    height: 100%;
                    vertical-align: middle;
                }
                .close{
                    display: block;
                    position: absolute;
                    right: -6px;
                    top: -10px;
                    line-height: 1;
                    font-size: 22px;
                    color: #aaa;
                }
            }
        }
    }
    .default-btn{
        margin-top:50px;
        width:100%;
        .tips{
            color:#BFBFBF;
            width:100%;
            text-align:center;
            span{
                color:#5F88FF;
            }
        }
    }
    .codeBox{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,0.6);
        .inner{
            width:300px;
            height:400px;
            background:rgba(255,255,255,1);
            border-radius:5px;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            .name{
                font-size:18px;
                color:#333333;
                margin-top:30px;
                text-align:center;
                font-weight:bold;
            }
            .desc{
                font-size:12px;
                margin:0 42px;
                color:#666666;
                line-height:20px;
                margin-top:20px;
                text-align:center;
                span{
                    color:#5F88FF;
                }
            }
            .code{
                width:206px;
                height:206px;
                margin:0 auto;
                margin-top:17px;
            }
            .save{
                width:100%;
                height 50px;
                line-height:50px;
                position:absolute;
                bottom:0;
                text-align:center;
                font-size:18px;
                color:#0055A4;
                font-weight:bold;
                border-top:1px solid #E6E6E6;
            }
            .offBtn{
                width:35px;
                height:35px;
                position:absolute;
                bottom:-70px;
                left:50%;
                margin-left:-17.5px;
            }
        }
    }
}
</style>
